<template>
  <div class="set-phone" style>
    <news-page-header>设置登录手机</news-page-header>

    <div class="title weight">设置新手机号</div>
    <div>
      <div class="region-input-box">
        <div class="region-select">
          <span class="region-class">+86</span>
          <span class="select-arrow">
            <span class="select-one"></span>
            <span class="select-two"></span>
          </span>
        </div>
        <div class="input-body" style="position:relative;">
          <div class="input-box">
            <div class="input-content">
              <input class="input" @blur="checkPhone" v-model.trim="newPhone" type="tel" />
              <span class="clear1 cancel" v-show="newPhone.length" @click="clearPhone"></span>
              <div class="content" v-show="!newPhone.length">请输入您想使用的手机号</div>
            </div>
            <!---->
            <!---->
            <!---->
            <div class="bottom-line"></div>
            <div class="bottom-line-active"></div>
          </div>
          <div class="err-text" v-text="showText"></div>
        </div>
      </div>
    </div>
    <div class="set-phone-explain">该手机号用于登录您的帐号。</div>

    <div class="footer">
      <span class="prex" @click="toEditPhone">上一步</span>
      <div class="next">
        <div class="button disable-button" v-if="nextIsOk">下一步</div>
        <div class="button" v-else @click="setPhone">设置手机</div>
      </div>
    </div>

    <div class="msg-box flex-center" style="margin: 3.22rem auto;" v-if="setIsOk">
      <span class="msg-content">设置成功，即将跳转</span>
    </div>
    <div class="msg-box flex-center" style="margin: 3.22rem auto;" v-if="setIsNotOk">
      <span class="msg-content">设置失败，请重试</span>
    </div>
  </div>
</template>

<script>
import "../../assets/css/registerCss/setPhone.css";
import newsPageHeader from "../news/newsPageHeader";

export default {
  data() {
    return {
      nextIsOk: true,
      setIsOk: false,
      setIsNotOk: false,
      newPhone: "",
      showText: ""
    };
  },
  components: {
    newsPageHeader
  },
  methods: {
    clearPhone() {
      this.newPhone = "";
    },
    checkPhone() {
      let reg = /^1[3-9]\d{9}$/; // 最新手机号正则

      if (!reg.test(this.newPhone)) {
        this.showText = "请正确输入11位手机号码";

        setTimeout(() => {
          this.showText = "";
        }, 3000);
      } else {
        this.showText = "";
        this.nextIsOk = false;
      }
    },
    async setPhone() {
      let sohuUsername = localStorage.getItem("sohuUsername");
      if(this.newPhone){
        let { data } = await this.$axios.put(
        "http://localhost:9394/users/editphone",
        {
          username: sohuUsername,
          phone: this.newPhone
        }
      );
      // window.console.log(data);
      if (data.type) {
        //修改成功
        this.setIsOk = true;
        this.newPhone = "";
        this.nextIsOk = true;

        setTimeout(() => {
          this.setIsOk = false;
          this.$router.push({ name: "saveCenter" });
        }, 1500);
      } else {
        //修改失败
        this.setIsNotOk = true;
        this.newPhone = "";
        this.nextIsOk = true;

        setTimeout(() => {
          this.setIsNotOk = false;
        }, 4000);
      }
      }
    },
    toEditPhone() {
      this.$router.push({ name: "editPhone" });
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.setIsOk = false;
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
